<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">
        <!-- 搜索框 -->
<!--                <el-col :span="5">-->
<!--                  <el-input v-model="listQuery.name" placeholder="请输入用户名" clearable @change="search"></el-input>-->
<!--                </el-col>-->

        <el-col :span="3">
          <el-input v-model="listQuery.name" placeholder="请输入名字" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.role" placeholder="角色">
            <el-option
              v-for="item in role_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col  :span="16">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="3" class="add">
          <el-button type="success" @click="handleAdd">增加角色</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.store_id" label="店铺">店铺</el-checkbox>
      <el-checkbox v-model="formThead.customer_id" label="用户">用户</el-checkbox>
      <el-checkbox v-model="formThead.name" label="名字">名字</el-checkbox>
      <el-checkbox v-model="formThead.telephone" label="联系电话">联系电话</el-checkbox>
      <el-checkbox v-model="formThead.wechat_number" label="微信号">微信号</el-checkbox>
      <el-checkbox v-model="formThead.wechat_qrcode" label="微信二维码">微信二维码</el-checkbox>
      <el-checkbox v-model="formThead.role" label="角色">角色</el-checkbox>
      <el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>
    </div>

    <el-table :data="employeeList" class="table" border :key="employeeList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="店铺" align="center" v-if="formThead.store_id">
        <template slot-scope="{row}">
          <span>{{getStoreName(row.store_id)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户" align="center" v-if="formThead.customer_id">
        <template slot-scope="{row}">
          <span>{{getCustomerName(row.customer_id)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="名字" align="center" v-if="formThead.name">
        <template slot-scope="{row}">
          <span>{{row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" align="center" v-if="formThead.telephone">
        <template slot-scope="{row}">
          <span>{{row.telephone}}</span>
        </template>
      </el-table-column>

      <el-table-column label="微信号" align="center" v-if="formThead.wechat_number">
        <template slot-scope="{row}">
          <span>{{row.wechat_number}}</span>
        </template>
      </el-table-column>

      <el-table-column label="微信二维码" align="center" v-if="formThead.wechat_qrcode">
        <template slot-scope="{row}">
          <img :src="row.wechat_qrcode === '' ? null : row.wechat_qrcode" alt="暂无二维码"
               @click="bigImage(row.wechat_qrcode)">
        </template>
      </el-table-column>


<!--

      <el-table-column label="联系人微信二维码" align="center" v-if="formThead.wechat_qrcode">
        <template slot-scope="{row}">
          <img :src="row.wechat_qrcode" alt="暂无二维码">
        </template>
      </el-table-column>


-->


      <el-table-column label="角色" align="center" v-if="formThead.role">
        <template slot-scope="{row}">

          <span v-if="row.role === 0" style="color: #409EFF">普通员工</span>
          <span v-else-if="row.role === 1" style="color: #2ac06d">员工</span>
          <span v-else-if="row.role === 2" style="color: #f1c40f">队长</span>
          <span v-else-if="row.role === 4" style="color: #2ac06d">管理员</span>
          <span v-else-if="row.role === 3" style="color: red">负责人</span>


        </template>
      </el-table-column>

      <el-table-column prop="tag" label="状态" align="center" v-if="formThead.status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'primary'" disable-transitions>
            {{scope.row.status === 0 ? '离职':'在职'}}
          </el-tag>
        </template>
      </el-table-column>



      <el-table-column label="添加时间" align="center" v-if="formThead.used_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.date_added}}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="openDelete(row.customer_store_employee_id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-role ref="showAddDialog"/>
    <edit-role ref="showEditDialog"/>

  </div>
</template>

<script>

  /**
   customer_store_employee_id
   store_id: 1,
   customer_id":      5,
   name:              "莫莫",
   telephone:         "13714179299",
   wechat_number:      "haishzaixiang",
   wechat_qrcode:     "zanshimeiyou",employee": 1,
   role: 1,
   status: 1,
   date_added: "2020-04-22 15:52:24"
   */

  import store from '@/store'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getStoreList} from '@/api/thk/store'

  import {list,del} from '@/api/thk/employee'



  import addRole from './add'
  import editRole from './edit'

  export default {
    name: 'Question',
    components: {
      addRole,
      editRole
    },

    data() {
      return {
        /**
         */
        employeeList: [],
        customerList: [],
        storeList: [],

        bigImageSrc: null,

        formThead: {
          store_id: true,
          customer_id: true,
          name: true,
          telephone: true,
          wechat_number: true,
          wechat_qrcode: true,
          role: true,
          status: true,
        },


        listQuery: {
          name: undefined,
          role: undefined,
          page: 1,
          pagesize: 10
        },

        total: undefined,

        // 角色：0普通员工，1员工,  2队长，3负责人, 4管理员

        role_options: [{
          value: '0',
          label: '普通员工'
        }, {
          value: '1',
          label: '员工'
        }, {
          value: '2',
          label: '队长'
        }, {
          value: '4',
          label: '管理员'
        }, {
          value: '3',
          label: '负责人'
        },{
          value: '',
          label: '全部'
        }],

        loading: true

      }
    },

    // created生命周期中调用查询question列表的方法
    created() {
      this.getCustomerList()
      this.getEmployeeList()
      this.getStoreList()
    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      getEmployeeList(){
        list(store.getters.token, this.listQuery).then(res=>{
          this.total = res.data.data.total
          this.employeeList = res.data.data.data
          console.log('employee>>>>')
          console.log(this.employeeList)
        }).catch(err => {
          console.log(err)
        })
      },

      getCustomerList(){
        getCustomerList(store.getters.token).then(res =>{
          this.customerList = res.data.list.data
          console.log("全部信息",this.customerList)
        },error => {
          console.log(error)
        })
      },

      // 获取店铺列表
      getStoreList(){
        getStoreList(store.getters.token).then(res =>{
          this.storeList = res.data.list.data
          console.log("店铺信息",res)
        },error => {
          console.log(error)
        })
      },

      // 触发增加按钮弹出增加问题对话框
      handleAdd(){
        // arg：是否点击了确定按钮
        this.$refs.showAddDialog.cancelSubmit(this.customerList, this.storeList)
      },

      // 触发编辑按钮.row是一行的数据，点击了哪一行，就是哪一行的数据，根据数据回显
      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog1(row, this.customerList, this.storeList)
      },


      // 删除customer
      handleDelete(customer_store_employee_id){
        del(store.getters.token, customer_store_employee_id).then(res => {
          // 删除之后，需要重新渲染.重新查询数据，会根据数据的length重新渲染
          console.log("删除customer成功!")
          this.getEmployeeList()

        }).catch(err => {
          console.log("删除customer失败")
        })
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(customer_store_employee_id) {
        this.$confirm('此操作将会删除角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(customer_store_employee_id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 根据用户id返回用户名,用于显示店铺所属用户
      getCustomerName(customer_id){
        let customers = this.customerList.filter(customer => {
          return customer.customer_id === customer_id
        })

        if(customers[0]){
          return customers[0].nickname
        }
        return customer_id
      },


      getStoreName(store_id){
        let stores = this.storeList.filter(store => {
          return store.customer_store_id === store_id
        })

        if(stores[0]){
          return stores[0].name
        }
        return store_id
      },


      // 搜索功能
      search(){
        this.listQuery.page = 1
        this.getEmployeeList()
      },


      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getEmployeeList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getEmployeeList()
      },
      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },
    }
  }

</script>

<style scoped>
  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
  }
  .filter-container{
    margin: 10px 0 0 20px;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .add{
    position: relative;
    left: 40px;
    top: 35px;
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }


</style>
